<template>
    <div>
        <div class="played" v-if="playList.length != 0" :style="{bottom:`${hg}px`}">
            <div class="playedImg" @click="updataShow">
                <img v-if="playList[playListIndex].al" :src="playList[playListIndex].al.picUrl" alt="">
                <img v-else :src="playList[playListIndex].picUrl" alt="">

            </div>
            <div>{{ playList[playListIndex].name }}</div>
            <div @click="play">
                <div v-if="!btn"><van-icon size='20' name="play-circle-o" /></div>
                <div v-if="btn"><van-icon size='20' name="pause-circle-o" /></div>
            </div>


        </div>
 
    <audio autoplay 
    loop 
    ref='audio'
    @play="onplay"
        :src="`https://music.163.com/song/media/outer/url?id=${playList[playListIndex].id}.mp3`">
    </audio>    
    <!--歌词弹出层-->
    <div class="demo">
        <van-popup v-model="show" position="bottom" :style="{ height: '100%', width: '100%' }">
        <MusicDetail 
        :detail='playList[playListIndex]'
        :play="play"
        :btn="btn"
        />
        </van-popup>

    </div>
</div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
export default {
    data() {
        return {};
        timer:0
    },
    updated(){
        this.$store.dispatch('getlyricList',this.playList[this.playListIndex].id)

    },
    watch: {
        //监听播放列表下标
        playListIndex() {
            this.$refs.audio.autoplay = true
        }

    },
    computed: {
        ...mapState(['playList', 'playListIndex', 'btn', 'show','hg']),
    },
    methods: {
        getCurrentTime(){
            this.timer =setInterval(()=>{

                this.updatacurrent(this.$refs.audio.currentTime)
            } ,100)
        },
        ...mapMutations(['updataBtn', 'updataShow','updatacurrent']),

        onplay(){
            this.updataBtn(true)
            this.getCurrentTime()
        },
        //播放方法
        play() {
            //获取audio标签
            let audio = this.$refs.audio
            
            console.log(audio);
            //如果暂停状态下，点击播放音乐改图标
            if (audio.paused) {
                audio.play()
                this.updataBtn(true)
                this.getCurrentTime()
            } else {
                audio.pause()
                this.updataBtn(false)
                this.getCurrentTime()
            }
            //点击，播放音乐



            // 暂停
            // 播放
            // 自动播放
            // 播放结束
            // 播放时间

        }
    }

}
</script>

<style lang="less" scoped>

.playedImg {
    width: 40px;
    height: 40px;

    img {
        width: 100%;
        border-radius: 50%;
    }
}

.played {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0 10px;
    box-sizing: border-box;
    width: 100%;
    background-color: pink;
    position: fixed;
    left: 0;
    bottom: 50px;
    z-index: 1;
}
</style>